DHTMLX Documentation

Creating custom skin for grid

Changing defaults

The look of the grid can be fully (or nearly fully) customized in CSS. dhtmlxgrid contains a set of CSS classes which define different aspects of the grid.

Most commonly-used styles

div.gridbox
    grid container
div.gridbox table.hdr td
    inner element of the header
div.gridbox table.hdr td div.hdrcell
    outer element of the header
div.gridbox table.obj tr td
    data cell
div.gridbox table.obj tr.rowselected td.cellselected, div.gridbox table.obj td.cellselected
    element in a selected cell
div.gridbox table.obj tr.rowselected td
    elements in a selected row

Footers

div.gridbox div.ftr
container of all footers
div.gridbox div.ftr td
footer element

Column moving

div.gridbox table.hdr td.columnTargetR div.hdrcell
    marker used to mark drop-right in case of column moving
div.gridbox table.hdr td.columnTargetL div.hdrcell
    marker used to mark drop-left in case of column moving
.dhx_dragColDiv
    representation of the dragged column

Edit related styles

div.gridbox table.obj td.editable{
    data cell in edit state
.dhx_combo_select
    select boxes inside grid editors
.dhx_combo_edit
    inputs inside grid editors
.dhx_textarea
    textareas inside grid editors
.dhx_clist
    checkbox list (clist excell)

D-n-D related styles

.dragSpanDiv
element used as drag text holder
.gridDragLine
marker of position during d-n-d (sibling and complex modes)

Rare used styles

.dhx_sub_row
    sub row inside the grid
div.gridbox .xhdr
    the space to the right of the last header (if grid width greater than the sum of column's widths)
div.gridbox table.row20px tr td
    additional styles for data cell in case of fixed row height mode
div.gridbox .objbox
    data part of grid

Skins

Skins customization

Each skin is actually a subset of default css class. For example, the following rules are defined in dhtmlxgrid.css for "xp" skin:

div.gridbox_xp
div.gridbox_xp .xhdr
div.gridbox_xp table.hdr td

As you can see the only difference is in "_xp" postfix which is the skin name. Thus, it will be "_modern" for "modern" skin, "_light" for "light" skin and etc.
So if you need to change the font for data cell in case of "xp" skin, you need to edit "div.gridbox_xp table.obj td" rule instead of "div.gridbox table.obj td".

The grid with defined skin will use all the default css rules and all skin related rules, so there is no need to write the same values again and again. Skin related styles contain info that differs from the default one.

Skin related css classes have two additional rules that can be set:

div.gridbox_xp .ev_xp
style will be applied to an even row
div.gridbox_xp .odd_xp
style will be applied to an odd row

The right part of the style name here is also based on the name of the used skin as it is described in the previous sample.

New skin creation

To create a new skin you should just create new css rules with necessary names. There is no need to do any code modifications to apply the new skin.
For example, we can add the following subset of rules:

div.gridbox_inverse {
    border:1px solid #004000;
}
div.gridbox_inverse table.hdr td {
    background-color:#004000;
    color:white;
    font-weight:bold;
}
div.gridbox_inverse table.obj td{
    background-color:black;
    color:white;
}

And later in js code we will use the following line:

grid.setSkin("inverse");

Our custom styles will be applied to the grid and as a result the grid will be displayed like this: